<template>
  <div>
    <div style="width:90%">
      <el-input
        placeholder="请输入房间号查询"
        style="width: 300px "
        suffix-icon="el-icon-search"
        v-model="query.roomNo"
      ></el-input>
      <el-button type="primary" style="margin: 10px 10px" @click="handlesearch"
        >查找</el-button
      >
      <i class="el-icon-refresh-right" @click="initcheckInData">刷新</i>
    </div>
    <div>
      <el-table
        ref="singleTable"
        :data="checkInfo"
        stripe
        height="400"
        border
        style="width: 90%"
        @selection-change="handleSelectionChange"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <!-- <el-table-column  width="40"> </el-table-column> -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="checkinInforId"
          label="入住信息ID"
          width="100"
          fixed
        >
        </el-table-column>
        <el-table-column prop="checkinId" label="入住ID"> </el-table-column>
        <el-table-column
          prop="room.roomType.roomTypeName"
          label="房间类型"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="room.roomId" label="房间ID号"> </el-table-column>
        <el-table-column prop="room.roomNo" label="房间号"> 
        <div :style="{backgroundColor : fontBackColor[index > 4?(index-(parseInt(index/5)*5)):index]}" class="icon_b" >
         <p :style="{color: fontColor[index > 4?(index-(parseInt(index/5)*5)):index]}" class="icon_self"></p>
        </div>
        </el-table-column>
        <el-table-column prop="checkinDate" label="入住时间" width="200px">
        </el-table-column>
        <el-table-column prop="status" label="入住状态" width="130px">
        </el-table-column>
        <el-table-column prop="roomPrice" label="房费"> </el-table-column>
        <el-table-column prop="cashPledge" label="押金"> </el-table-column>
      </el-table>
      <div class="button_box">
        <el-button
          type="primary"
          class="add_checkOutList"
          :disabled="this.multipleSelection.length == 0"
          @click="add_to_checkOut"
          >加入待退房列表</el-button
        >
      </div>
    </div>
    <br /><br />

    <!-- 确认退房框  开始 -->
    <div>
      <el-table
        ref="singleTable"
        :data="checkOutList"
        stripe
        height="400"
        border
        style="width: 90%"
        @selection-change="handleSelectionChange"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <!-- <el-table-column  width="40"> </el-table-column> -->
        <el-table-column
          prop="checkinInforId"
          label="入住信息ID"
          width="100"
          fixed
        >
        </el-table-column>
        <el-table-column prop="checkinId" label="入住ID"> </el-table-column>
        <el-table-column
          prop="room.roomType.roomTypeName"
          label="房间类型"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="room.roomId" label="房间ID号"> </el-table-column>
        <el-table-column prop="room.roomNo" label="房间号"> </el-table-column>
        <el-table-column prop="checkinDate" label="入住时间" width="200px">
        </el-table-column>
        <el-table-column prop="status" label="入住状态" width="130px">
        </el-table-column>
        <el-table-column prop="roomPrice" label="房费"> </el-table-column>
        <el-table-column prop="cashPledge" label="押金"> </el-table-column>
        <el-table-column label="退房人" fixed="right" width="150px">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.checkinCusName"
              placeholder="请选择退房人"
              @change="forceUpdate(scope.row)"
            >
              <el-option
                v-for="(item, index) in checkOutPeoples"
                :key="index"
                :label="item.checkinCusName"
                :value="item.checkinCusName"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="remove_from_list(scope.row)"
              >从列表中移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="button_box">
        <el-button
          type="primary"
          class="add_checkOutList"
          :disabled="this.checkOutList.length == 0"
          @click="comfirmCheckOut"
          >确认退房</el-button
        >
      </div>
    </div>
    <!-- 确认退房框  结束 -->
  </div>
</template>
<script>
import {
  searchCheckinInfo,
  queryNowCheckinInforNoPage,
  searchCheckinInfoById
} from "../api/checkin.js";
import { returnCheckoutCus, confirmCheckout } from "../api/checkOut.js";
export default {
  name: "CheckInformation",
  data() {
    return {

      fontColor: ['#0477ff', '#01b470', '#ff711b', '#ff4848', '#8b48f7'],
      fontBackColor: ['#edf3ff', '#e6fbf3', '#ffece1', '#fff3f3', '#f5efff'],
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      //查询参数
      query: {
        checkinInforId: undefined,
        roomTypeName: undefined,
        roomNo: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        roomState: undefined,
        cashPledge: undefined,
        remark: undefined
      },
      //最终返回后端的退房数据
      checkOutParam: [],
      //后端返回的退房人
      checkOutPeoples: [],
      //勾选下来的待退房数据
      multipleSelection: [],
      //选择的待退房选项id数组
      checkInfoIds: [],
      //待退房列表
      checkOutList: [],
      //数据库查询房间入住信息参数
      checkInfo: [],
      dialogeditVisible: false
    };
  },
  mounted() {
    this.initcheckInData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    },
    resetform() {
      this.query = {
        checkinInforId: undefined,
        roomTypeName: undefined,
        roomNo: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        roomState: undefined,
        roomPrice: undefined,
        cashPledge: undefined,
        remark: undefined
      };
    },
    forceUpdate(row) {
      var tempParm = {};
      tempParm.checkinId = row.checkinId;
      tempParm.checkinInforId = row.checkinInforId;
      tempParm.checkinCusName = row.checkinCusName;
      tempParm.remark = "无";

      this.checkOutParam.push(tempParm);
    },
    //从列表中移除
    remove_from_list(row) {
      //清除所选项最终返回后端的退房数据
      for (let index = 0; index < this.checkOutParam.length; index++) {
        const element = this.checkOutParam[index];
        if (element.checkinInforId === row.checkinInforId) {
          this.checkOutParam.splice(index, 1);
        }
      }
      // this.checkOutParam.splice(this.checkOuParam.indexOf(row), 1);
      //清空后端返回的退房人
      this.checkOutPeoples.splice(this.checkOutPeoples.indexOf(row), 1);
      //清空勾选下来的待退房数据
      this.multipleSelection = [];
      //上面框恢复移除的元素
      this.checkInfo.push(this.checkOutList[this.checkOutList.indexOf(row)]);
      //删除下面框checkOutList已勾选的选项
      this.checkOutList.splice(this.checkOutList.indexOf(row), 1);
    },
    //确认退房
    comfirmCheckOut() {
      console.log(this.checkOutParam);
      confirmCheckout(this.checkOutParam)
        .then(resp => {
          if (resp.data.code == "200") {
            this.checkOutList.splice(0, this.checkOutList.length);
            //清空最终返回后端的退房数据
            this.checkOutParam = [];
            //清空后端返回的退房人
            this.checkOutPeoples = [];
            //清空勾选下来的待退房数据
            this.multipleSelection = [];
            this.$message({
              type: "success",
              message: "获取退房成功!"
            });
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //加入到带退房列表
    add_to_checkOut() {
      var ids = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.checkInfoIds.push(this.multipleSelection[i].checkinInforId);
        //将选中数据的每个roomeId添加到ids中
        ids.push(this.multipleSelection[i].checkinInforId);
        //删除上面框checkInfo已勾选的选项
        this.checkInfo.splice(
          this.checkInfo.indexOf(this.multipleSelection[i]),
          1
        );
        searchCheckinInfoById(ids[i])
          .then(resp => {
            this.checkOutList.push(resp.data.data);
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      }
      this.checkInfoIds = JSON.parse(JSON.stringify(this.checkInfoIds));
      returnCheckoutCus(this.checkInfoIds)
        .then(resp => {
          if (resp.data.code == "200") {
            //清空勾选下来的待退房数据
            this.checkInfoIds = [];
            this.multipleSelection = [];
            console.log(resp.data.data.checkinCusInforList);
            this.checkOutPeoples = resp.data.data.checkinCusInforList;
            this.$message({
              type: "success",
              message: "获取入住人成功!"
            });
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //查询入住信息
    handlesearch() {
      if (this.query.roomNo != null) {
        searchCheckinInfo(this.query.roomNo)
          .then(resp => {
            if (resp.data.code == "200") {
              this.checkInfo = resp.data.data;
              this.$message({
                type: "success",
                message: "查询成功!"
              });
            } else {
              this.$message.error(resp.data);
            }
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      } else {
        this.$message({
          type: "success",
          message: "房号列表已刷新!"
        });
      }
      this.resetform();
    },

    //更新入住信息
    initcheckInData() {
      this.loading = true;
      queryNowCheckinInforNoPage()
        .then(resp => {
          if (resp.data.code == "200") {
            this.checkInfo = resp.data.data;
            this.loading = false;
            console.log(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.loading = false;
    }
  }
};
</script>

<style>
.button_box {
  width: 90%;
  margin-top: 10px;
  margin-bottom: 40px;
}
.add_checkOutList {
  padding-right: 10px;
  float: right;
}
</style>
